﻿<%@ Page Title="" Language="C#" MasterPageFile="~/Site.Master" AutoEventWireup="true"
    CodeBehind="Approval 1.aspx.cs" Inherits="CarRent.Approval" %>

<asp:Content ID="Content1" ContentPlaceHolderID="HeadContent" runat="server">
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="MainContent" runat="server">
    <div id="booking-form">
        <div id="tabs">
            <ul data-bind="foreach: sections">
                <li data-bind="css: { active: selected }"><a data-bind="attr: { href: '#tab' + name }
, click: $parent.chooseTab" data-toggle="tab"><span data-bind="text: name"></span>(<span
    data-bind="text: itemCount"></span>)</a></li>
            </ul>
        </div>
        <div id="filter">
            <div class="section group">
                <div class="span_1_of_3 col">
                    <span>Keyword:</span>
                </div>
                <div class="span_2_of_3 col">
                    <input id="keyword" type="text" data-bind="event: { keydown: onEnterToFind }" />
                </div>
                <div class="span_3_of_3 col">
                    <input id="btnFind" type="button" data-bind="click: findBooking" value="Search" class="btnFind" />
                </div>
            </div>
        </div>
        <div class="command button">
            <ul>
                <li>
                    <input type="button" data-bind="click: approveBookings" value="Approve" class="btnApprove" /></li>
                <li>
                    <input type="button" data-bind="click: undoItems" value="Undo" class="btnUndo" /></li>
                <li>
                    <input type="button" data-bind="click: destroyItems" value="Destroy" class="btnDestroy" /></li>
                <!-- /ko -->
            </ul>
        </div>
        <div data-bind="with: bookingVM">
            <div class="paging">
                <a href="javascript:void(0)" data-bind="click: previousPage, visible: startIndex() > 1">
                    << Trang trước</a> <span data-bind="text: currentPage, visible: rowcount() > 0">
                </span><a href="javascript:void(0)" data-bind="click: nextPage, visible: canNextPage">
                    Trang sau >></a>
            </div>
            <table data-bind="foreach: bookingGroups" style="width: 100%" id="grid-bookings" class="gridTable">
                <thead>
                    <tr>
                        <th rowspan="2">
                            Last name
                        </th>
                        <th rowspan="2">
                            First name
                        </th>
                        <th rowspan="2">
                            Department
                        </th>
                        <th colspan="2">
                            Time
                        </th>
                        <th colspan="2">
                            Date
                        </th>
                        <th rowspan="2">
                            Destination
                        </th>
                        <th rowspan="2">
                            Purpose
                        </th>
                        <th rowspan="2">
                            Request time
                        </th>
                        <th rowspan="2">
                            Request date
                        </th>
                        <th rowspan="2">
                            Remark
                        </th>
                        <th>
                            <input type="checkbox" data-bind="click: $root.bookingVM().selectAll, checked: $root.bookingVM().allSelected" />
                        </th>
                    </tr>
                    <tr>
                        <th>
                            From (hh:mm)
                        </th>
                        <th>
                            To (hh:mm)
                        </th>
                        <th>
                            From (dd/mm)
                        </th>
                        <th>
                            To (dd/mm)
                        </th>
                    </tr>
                </thead>
                <tbody>
                    <tr class="group-tr">
                        <td colspan="13">
                            <a class="expander" href="javascript:void(0)"><span class="group-text" data-bind="text: $data">
                            </span>
                                <!-- ko if: $root.bookingVM().bookings.index.groupBy()[$data] != null && $root.bookingVM().bookings.index.groupBy()[$data].length > 0 -->
                                (<span class="group-length" data-bind="text: $root.bookingVM().bookings.index.groupBy()[$data].length"></span>)
                                <!-- /ko -->
                            </a>
                        </td>
                    </tr>
                </tbody>
                <tbody data-bind="{ attr: { id: $data }, foreach: $root.bookingVM().bookings.index.groupBy()[$data] }">
                    <tr>
                        <td data-bind="text: lastName">
                        </td>
                        <td data-bind="text: firstName">
                        </td>
                        <td data-bind="text: department">
                        </td>
                        <td data-bind="text: fromTime">
                        </td>
                        <td data-bind="text: toTime">
                        </td>
                        <td data-bind="text: fromDate">
                        </td>
                        <td data-bind="text: toDate">
                        </td>
                        <td data-bind="text: destination">
                        </td>
                        <td data-bind="text: purpose">
                        </td>
                        <td data-bind="text: requestTime">
                        </td>
                        <td data-bind="text: requestDate">
                        </td>
                        <td data-bind="text: remark">
                        </td>
                        <td class="col_1">
                            <input type="checkbox" data-bind="checked: selected" />
                        </td>
                    </tr>
                </tbody>
            </table>
            <div class="paging">
                <a href="javascript:void(0)" data-bind="click: previousPage, visible: startIndex() > 1">
                    << Trang trước</a> <span data-bind="text: currentPage, visible: rowcount() > 0">
                </span><a href="javascript:void(0)" data-bind="click: nextPage, visible: canNextPage">
                    Trang sau >></a>
            </div>
        </div>
    </div>
</asp:Content>
